<template>
  <div>
    <el-input :value="$route.params.roleName" disabled></el-input>

    <!-- Tree -->
    <div style="margin-top:40px">
      <el-tree
        :data="data"
        show-checkbox
        default-expand-all
        node-key="id"
        ref="tree"
        highlight-current
        :props="defaultProps"
      >
      </el-tree>
    </div>
    <p>
      <el-button @click="cancelRole">取消</el-button>
      <el-button @click="saveAssign" type="primary">确定</el-button>
    </p>
  </div>
</template>
<script>
import { doAssignApi, getperList } from "@/api/acl/role";
export default {
  name: "Auth",
  data() {
    return {
      // tree数数据
      data: [],
      defaultProps: {
        children: "children",
        label: "name"
      },
      checkeKeyList: [],
      permissionIdList: []
    };
  },

  methods: {
    // 分配角色权限
    async saveAssign() {
      // 获取全选按钮
      const allCheckRoleList = this.$refs.tree.getCheckedKeys();
      // 获取半选
      const halfCheckRoleList = this.$refs.tree.getHalfCheckedKeys();
      // 合并
      this.permissionIdList = [...allCheckRoleList, ...halfCheckRoleList];
      // 发送请求
      await doAssignApi(this.$route.params.roleId, this.permissionIdList);
      // 跳转
      this.$router.push({ name: "Role" });
      // 提示
      this.$message.success("权限分配成功");
    },
    // 取消分配
    cancelRole() {
      // 跳转
      this.$router.push({ name: "Role" });
      // 提示
      this.$message.warning("取消分配权限");
    },
    // 获取数据
    async getList() {
      // 将路由传参过来的数据拿出来
      const roleId = this.$route.params.roleId;
      // 发请求
      const result = await getperList(roleId);
      // 将响应回来的数据赋值给data中的数据
      this.data = result.data.children;
      // 调用遍历默认选中提取key的方法
      this.getCheckeList(this.data);
      // 将提取的key通过tree组件自带的设置选中的方法进行选中
      this.$refs.tree.setCheckedKeys(this.checkeKeyList);
      // console.log(this.$route.params);
      // console.log(roleId);
      // console.log(result);
    },
    // 使用深层次的遍历将默认选中的id提取出来
    getCheckeList(allCheck) {
      // 所有的选中项要是最基础层，level === 4
      allCheck.forEach(item => {
        if (item.select && item.level === 4) {
          this.checkeKeyList.push(item.id);
        } else if (item.children) {
          // 判断有没有子层
          // 如果有，则继续把子层带进去遍历
          this.getCheckeList(item.children);
        }
      });
    }
  },

  // 初始化
  mounted() {
    this.getList();
  }
};
</script>
<style></style>
